<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-music</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" th:href="@{/webjars/element-ui/lib/theme-chalk/index.css}">
    <script th:src="@{/webjars/vue/dist/vue.js}"></script>
    <script th:src="@{/webjars/element-ui/lib/index.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/axios/dist/axios.js}"></script>
    <!-- https://aplayer.js.org -->
    <script th:src="@{/aplyer/APlayer.min.js}"></script>
    <link rel="stylesheet" th:href="@{/aplyer/APlayer.min.css}">
    <style>
        .el-tag + .el-tag {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="20">
            <div th:replace="~{admin2/header::header}"></div>
            <el-row style="margin-bottom: 12px;">
                <el-button type="success" size="mini" @click="onBackHome">返回</el-button>
            </el-row>

            <el-row style="margin-bottom: 12px;">
                <el-divider content-position="left">添加音乐</el-divider>
            </el-row>
            <el-row style="margin-bottom: 12px;">
                <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="80px">
                    <el-input v-model="dataForm.id" v-show="false"></el-input>
                    <el-form-item label="播放器">
                        <div id="aplayer"></div>
                    </el-form-item>
                    <el-form-item label="名称" prop="musicName">
                        <el-input v-model.trim="dataForm.musicName" @change="changeAudioUrlEvent" @blur="changeAudioUrlEvent"></el-input>
                    </el-form-item>
                    <el-form-item label="作者" prop="artist">
                        <el-input v-model.trim="dataForm.artist" @change="changeAudioUrlEvent" @blur="changeAudioUrlEvent"></el-input>
                    </el-form-item>
                    <el-form-item label="专辑" prop="album">
                        <el-input v-model.trim="dataForm.album"></el-input>
                    </el-form-item>
                    <el-form-item label="封面" prop="coverUrl" v-show="dataForm.coverUrl">
                        <el-image :src="dataForm.coverUrl" style="width: 130px; height: 130px"></el-image>
                        <el-link style="margin-left: 10px" :underline="false" @click="downloadImage" v-show="sys.downloadImageSuccess">下载</el-link>
                        <el-link style="margin-left: 10px" :underline="false" :href="dataForm.coverUrl" target="_blank" v-show="!sys.downloadImageSuccess">另存</el-link>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="自动填充">
                                <template>
                                    <el-radio v-model="sys.autoFill" label="true" @input="changeAudioUrlEvent">是</el-radio>
                                    <el-radio v-model="sys.autoFill" label="false" @input="changeAudioUrlEvent">否</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="音频后缀">
                                <template>
                                    <el-radio v-model="sys.audioSuffix" label=".mp3">.mp3</el-radio>
                                    <el-radio v-model="sys.audioSuffix" label=".m4a">.m4a</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="封面后缀">
                                <template>
                                    <el-radio v-model="sys.coverSuffix" label=".jpg">.jpg</el-radio>
                                    <el-radio v-model="sys.coverSuffix" label=".png">.png</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="音乐来源">
                        <el-tabs v-model="sys.linkSourceName" type="border-card" @tab-click="onChangeLinkSource">
                            <el-tab-pane
                                    :label="link.linkSourceName"
                                    :name="link.linkSourceName"
                                    v-for="(link, index) in dataForm.linkList"
                                    :key="index">
                                <el-row :gutter="10" style="margin-bottom: 10px;">
                                    <el-col :span="23">
                                        <el-form-item label="链接">
                                            <el-input type="textarea"
                                                      autosize v-model.trim="link.linkMap.AUDIO_LINK" @change="changeAudioUrlEvent" @blur="changeAudioUrlEvent"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-button type="warning" size="mini" icon="el-icon-delete" circle @click="onClearAudioUrl"></el-button>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="10" style="margin-bottom: 10px;">
                                    <el-col :span="23">
                                        <el-form-item label="封面">
                                            <el-input type="textarea"
                                                      autosize v-model.trim="link.linkMap.COVER_LINK" @change="changeAudioUrlEvent" @blur="changeAudioUrlEvent"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="onClearCoverUrl"></el-button>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form-item>
                    <el-form-item label="标签" prop="sort">
                        <el-tag
                                :key="tagName"
                                v-for="(tagName, index)  in dataForm.tagNameList"
                                closable
                                :disable-transitions="false"
                                @close="handleCloseTag(tagName)">
                            {{tagName}}
                        </el-tag>
                        <el-row style="margin-top: 10px;">
                            <span style="color: #606266">选择标签：</span>
                            <el-select
                                    size="mini"
                                    v-model="dataForm.tagNameList"
                                    collapse-tags
                                    multiple
                                    filterable
                                    placeholder="搜索标签">
                                <el-option
                                        v-for="tagName in sys.quickTagNameList"
                                        :key="tagName"
                                        :label="tagName"
                                        :value="tagName">
                                </el-option>
                            </el-select>
                            <el-popover
                                    placement="right"
                                    width="350"
                                    trigger="click">
                                <el-form :inline="true" :model="addTagForm">
                                    <el-form-item label="标签">
                                        <el-input v-model="addTagForm.tagName" placeholder="请输入"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" size="mini" @click="onAddMusicTag">确认</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-button style="border-left: 10px;" type="info" size="mini" icon="el-icon-plus" slot="reference" circle></el-button>
                            </el-popover>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model.number="dataForm.sort"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="onSubmit('dataForm')">提交</el-button>
                        <el-button size="mini" @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>

            <el-row style="margin-bottom: 12px;">
                <el-divider content-position="left">解析音乐</el-divider>
            </el-row>

            <el-row style="margin-bottom: 12px;">
                <el-form ref="parseForm" :model="parseForm" :rules="rules2" label-width="80px">
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="onParse('parseForm')">解析</el-button>
                        <el-button size="mini" @click="onReset2">重置</el-button>
                    </el-form-item>
                    <el-form-item label="音乐平台" prop="platformType">
                        <el-radio v-model="parseForm.platformType" label="WANG_YI_YUN">网易云音乐</el-radio>
                        <el-radio v-model="parseForm.platformType" label="QQ_MUSIC">QQ音乐</el-radio>
                        <el-radio v-model="parseForm.platformType" label="XIA_MI_MUSIC" disabled>虾米音乐</el-radio>
                    </el-form-item>
                    <el-form-item label="源码内容" prop="content">
                        <el-input :autosize="{ minRows: 4, maxRows: 8}" type="textarea" placeholder="请输入要解析的html内容" v-model="parseForm.content"></el-input>
                    </el-form-item>
                </el-form>
            </el-row>

            <div th:replace="~{admin2/admin-foot::admin-foot}"></div>
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
    </el-row>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            return {
                parseForm: {
                    platformType: null,
                    content: null
                },
                addTagForm: {
                    tagName: ''
                },
                dataForm: {
                    id: null,
                    musicName: '',
                    artist: '',
                    album: '',
                    coverUrl: '',
                    sort: null,
                    linkList: [
                        {
                            linkSource: 0,
                            linkSourceName: "github",
                            linkMap: {
                                AUDIO_LINK: "",
                                COVER_LINK: ""
                            }
                        },
                        {
                            linkSource: 1,
                            linkSourceName: "alist",
                            linkMap: {
                                AUDIO_LINK: "",
                                COVER_LINK: ""
                            }
                        }
                    ],
                    tagNameList: [],
                    tagList: []
                },
                sys: {
                    quickTagNameList: [],
                    music: [[${music}]],
                    activeNames: null,
                    autoFill: 'true',
                    audioSuffix: '.mp3',
                    coverSuffix: '.jpg',
                    dateYear: new Date().getFullYear(),
                    linkSourceName: 'alist',
                    linkSourceIndex: '1',
                    downloadImageSuccess: true
                },
                musicPlayer: {
                    musicName: null,
                    musicAuthor: null,
                    musicAudioUrl: '',
                    musicCoverUrl: ''
                },
                rules2: {
                    platformType: [
                        { required: true, message: '请选择音乐平台', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入源码内容', trigger: 'blur' }
                    ]
                },
                rules: {
                    musicName: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    artist: [
                        { required: true, message: '请输入作者', trigger: 'blur' }
                    ],
                    album: [
                        { required: true, message: '请输入专辑', trigger: 'blur' }
                    ],
                    sort: [
                        { type: 'number', message: 'sort必须为数字值'}
                    ]
                }
            }
        },
        mounted() {
            this.initSys();
            this.showDetail();
            this.initAplyer();
        },
        methods: {
            onAddMusicTag() {
                axios.post('/admin/saveOrUpdateTag', this.addTagForm)
                    .then(response => {
                        if(response.data.code === 0) {
                            this.addTagForm = {
                                tagName: ''
                            }
                            this.syncTagNameList()
                            this.$message.success(response.data.msg);
                        } else if(response.request && response.request.responseURL) {
                            window.location.href = response.request.responseURL;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                    });
            },
            syncTagNameList() {
                axios.post('/admin/tagNameDictList', {})
                    .then(response => {
                        if(response.data.code === 0) {
                            this.sys.quickTagNameList = response.data.data
                        } else if(response.request && response.request.responseURL) {
                            window.location.href = response.request.responseURL;
                        } else {
                            this.sys.quickTagNameList = []
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                    });
            },
            handleCloseTag(tagName) {
                this.dataForm.tagNameList.splice(this.dataForm.tagNameList.indexOf(tagName), 1);
            },
            onChangeLinkSource(tab, event) {
                this.sys.linkSourceName = this.dataForm.linkList[tab.index].linkSourceName;
                this.sys.linkSourceIndex = tab.index;
                this.initAplyer();
            },
            downloadImage() {
                const url = this.dataForm.coverUrl
                const filename = (this.dataForm.musicName ? this.dataForm.musicName : 'music') + '.jpg'
                this.getBlob(url, (blob) => {
                    this.saveAs(blob, filename)
                })
            },
            getBlob(url, cb) {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', url, true)
                xhr.responseType = 'blob'
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        this.sys.downloadImageSuccess = true
                        cb(xhr.response)
                    } else {
                        this.sys.downloadImageSuccess = false
                        this.$message.error('下载失败，请点击[另存]');
                    }
                }
                xhr.onerror = () => {
                    this.sys.downloadImageSuccess = false
                    this.$message.error('下载失败，请点击[另存]');
                };
                xhr.send()
            },
            saveAs(blob, filename) {
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, filename)
                }
                else {
                    var link = document.createElement('a')
                    var body = document.querySelector('body')

                    link.href = window.URL.createObjectURL(blob)
                    link.download = filename

                    link.style.display = 'none'
                    body.appendChild(link)

                    link.click()
                    body.removeChild(link)
                    window.URL.revokeObjectURL(link.href)
                }
            },
            showDetail() {
                if(this.sys.music && this.sys.music.id) {
                    axios.post('./detailMusic', {
                            id: this.sys.music.id
                        })
                        .then(response => {
                            if(response.data.code === 0) {
                                this.sys.music = response.data.data;
                            } else if(response.request && response.request.responseURL) {
                                window.location.href = response.request.responseURL;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            this.$message.error(error);
                        });

                    this.dataForm.id = this.sys.music.id;
                    this.dataForm.musicName = this.sys.music.title;
                    this.dataForm.artist = this.sys.music.artist;
                    this.dataForm.album = this.sys.music.album;
                    this.dataForm.linkList = this.sys.music.linkList;
                    this.dataForm.sort = this.sys.music.sort;
                    this.dataForm.tagList = this.sys.music.tagList;
                    this.dataForm.tagNameList = this.sys.music.tagList.map(data => data.name)

                    this.initAplyer();
                } else {
                    this.sys.music = {
                        id: null,
                        musicName: null,
                        artist: null,
                        album: null,
                        sort: null,
                        linkList: []
                    };
                    axios.get('./getLinkList')
                        .then(response => {
                            if(response.data.code === 0) {
                                this.sys.music.linkList = response.data.data;
                                this.dataForm.linkList = response.data.data;
                                this.musicPlayer.musicAudioUrl = this.dataForm.linkList[0].linkMap.AUDIO_LINK;
                            } else if(response.request && response.request.responseURL) {
                                window.location.href = response.request.responseURL;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            this.$message.error(error);
                        });
                }
            },
            initAplyer() {
                this.musicPlayer.musicName = this.dataForm.musicName;
                this.musicPlayer.musicAudioUrl = ''
                this.musicPlayer.musicCoverUrl = ''
                if(this.dataForm.linkList[this.sys.linkSourceIndex]) {
                    this.musicPlayer.musicAudioUrl = this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.AUDIO_LINK
                    this.musicPlayer.musicCoverUrl = this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.COVER_LINK
                }
                this.musicPlayer.musicAuthor = this.dataForm.artist;
                new APlayer({
                    container: document.getElementById('aplayer'),
                    theme: '#5FB878',
                    audio: [{
                        name: this.musicPlayer.musicName,
                        artist: this.musicPlayer.musicAuthor,
                        url: this.musicPlayer.musicAudioUrl,
                        cover: this.musicPlayer.musicCoverUrl
                    }]
                });
            },
            onParse(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (!valid) {
                        return false;
                    }

                    axios.post('./parse', this.parseForm)
                        .then(response => {
                            this.sys.downloadImageSuccess = true
                            if(response.data.code === 0) {
                                this.dataForm.musicName = response.data.data.musicTitle;
                                this.dataForm.artist = response.data.data.artist;
                                this.dataForm.album = response.data.data.album;
                                this.dataForm.coverUrl = response.data.data.coverUrl;
                            } else if(response.request && response.request.responseURL) {
                                window.location.href = response.request.responseURL;
                            } else {
                                this.dataForm.coverUrl = ''
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            this.$message.error(error);
                        });
                });
            },
            onReset2() {
                this.$refs.parseForm.resetFields();
                this.dataForm.coverUrl = ''
                this.sys.downloadImageSuccess = true
            },
            onSubmit(dataForm) {
                this.$refs.dataForm.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    axios.post('./createOrUpdateMusic', this.dataForm)
                        .then(response => {
                            if(response.data.code === 0) {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'success'
                                });
                                location.href = './'
                            } else if(response.request && response.request.responseURL) {
                                window.location.href = response.request.responseURL;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            this.$message.error(error);
                        });
                });
            },
            onReset() {
                this.initSys();
                this.initDataForm();
                this.showDetail();
                this.initAplyer();
            },
            onClearAudioUrl() {
                this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.AUDIO_LINK = null;
                this.initAplyer();
            },
            onClearCoverUrl() {
                this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.COVER_LINK = null;
                this.initAplyer();
            },
            onBackHome() {
                location.href = './';
            },
            changeAudioUrlEvent() {
                let audioUrl = this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.AUDIO_LINK;
                let coverUrl = this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.COVER_LINK;
                // 开启自动填充
                if('true' === this.sys.autoFill && this.sys.linkSourceName === 'github') {
                    if(audioUrl !== null  && audioUrl !== '' && (coverUrl === null || coverUrl === '')) {
                        let start = audioUrl.lastIndexOf('.');
                        if(start >= 0) {
                            coverUrl = audioUrl.substr(0, start);
                        }
                        coverUrl = coverUrl + this.sys.coverSuffix;
                        this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.COVER_LINK = coverUrl;
                    }
                    if(coverUrl !== null && coverUrl !== '' && (audioUrl === null || audioUrl === '')) {
                        let start = coverUrl.lastIndexOf('.');
                        if(start >= 0) {
                            audioUrl = coverUrl.substr(0, start);
                        }
                        audioUrl = audioUrl + this.sys.audioSuffix;
                        this.dataForm.linkList[this.sys.linkSourceIndex].linkMap.AUDIO_LINK = audioUrl;
                    }
                }
                this.initAplyer();
            },
            initDataForm() {
                this.dataForm.musicName = ''
                this.dataForm.coverUrl = ''
                this.dataForm.artist = ''
                this.dataForm.album = ''
                this.dataForm.sort = null
            },
            initSys: function () {
                this.sys.downloadImageSuccess = true
                this.sys.autoFill = 'true'
                this.sys.audioSuffix = '.mp3'
                this.sys.coverSuffix = '.jpg'
                this.sys.dateYear = new Date().getFullYear()
                this.syncTagNameList();
            }
        }
    })
</script>
</html>
